<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园技能互助平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="style/headNavi.css">
    <link rel="stylesheet" href="style/FloatingUIcard.css">
   <link rel="stylesheet" href="responsive/index.css">
   <link rel="stylesheet" href="style/site.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        body {
            background-color: #f9fafb;
            color: #333;
            line-height: 1.6;
        }

        /* 页面内容部分 */
        .section {
            padding: 100px 5%;
            min-height: 100vh;
            padding-top: 80px;
        }

        .hero {
            background: linear-gradient(135deg, #f1f4f9 0%, #dff1ff 100%);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .hero-content {
            max-width: 600px;
        }

        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            color: #222;
            line-height: 1.2;
        }

        .hero p {
            font-size: 1.2rem;
            color: #555;
            margin-bottom: 30px;
        }

        .hero-buttons {
            display: flex;
            gap: 15px;
        }

        .btn-primary {
            background: #ff6b6b;
            color: white;
            border: none;
            padding: 12px 30px;
            font-size: 1.1rem;
        }

        .btn-primary:hover {
            background: #ff5252;
        }

        .btn-outline {
            background: transparent;
            color: #4a6cf7;
            border: 2px solid #4a6cf7;
            padding: 12px 30px;
            font-size: 1.1rem;
        }

        .btn-outline:hover {
            background: #4a6cf7;
            color: white;
        }

        .hero-image {
            width: 45%;
            animation: float 5s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        .section-title {
            text-align: center;
            margin-bottom: 60px;
        }

        .section-title h2 {
            font-size: 2.5rem;
            color: #222;
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }

        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 70px;
            height: 4px;
            background: #4a6cf7;
            border-radius: 2px;
        }

        .section-title p {
            color: #777;
            max-width: 700px;
            margin: 0 auto;
        }

    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar" id="navbar">
        <a href="#" class="logo">
            <i class="fas fa-hands-helping"></i>
            SkillShare
        </a>

        <div class="menu-toggle" id="menu-toggle">
            <i class="fas fa-bars"></i>
        </div>

        <ul class="nav-links" id="nav-links">
            <li><a href="#home" class="active">Home</a></li>
            <li><a href="#features">Functions</a></li>
            <li><a href="#community">Features</a></li>
            <li><a href="#courses">Statement</a></li>
            <li><a href="#about">About us</a></li>
            <li><a href="#contact">Acknowledgements</a></li>
        </ul>

        <div class="user-actions">
            <div class="search-box">
                <input type="text" placeholder="Just for beautiful...">
                <i class="fas fa-search"></i>
            </div>
            <button class="btn btn-login" onclick="window.location.href='login.html'">Login</button>
            <button class="btn btn-register" onclick="window.location.href='register.html'">Regist</button>
        </div>
    </nav>

    <!-- 首页内容 -->
    <section id="home" class="section hero">
        <div class="hero-content">
            <h1>Discover Skills, Share Knowledge, Build a Campus Community</h1>
            <p>The Campus Skill-Sharing Platform is a community where students can learn from each other and share skills and knowledge. Whether you want to learn programming, design, music, or any other skill, you can find like-minded peers here.</p>
            <div class="hero-buttons">
                <button class="btn btn-primary" onclick= "window.location.href='login.html'">Start now</button>
                <button class="btn btn-outline" onclick= "window.location.href='#features'">Learn more</button>
            </div>
        </div>
        <img src="..\resources\images\index.avif" alt="学生协作学习" class="hero-image">
    </section>

    <!-- 功能部分 -->
    <section id="features" class="section features">
        <!-- 引用悬浮式卡片 -->
        <div class="section-title">
            <h2>Platform Features</h2>
            <p>We offer a variety of features to help students better learn from and communicate with each other.</p>
        </div>
        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-exchange-alt"></i>
                </div>
                <h3>Skill Exchange</h3>
                <p>Exchange the skills you excel at for the ones you want to learn without any fee, just your time and enthusiasm.</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-users"></i>
                </div>
                <h3>Mutual Learning Support</h3>
                <p>If you urgently need a specific skill to solve a problem, post your request, and someone will be there to help you!</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-video"></i>
                </div>
                <h3>Mutiplate Learn Methonds</h3>
                <p>Participate in our activities or talk with each other to communicate!</p> 
               
            </div>
        </div>
    </section>

    <!-- 特色介绍 -->
    <section id="community" class="section">
        <div class="section-title">
            <h2>Develop characteristic elements</h2>
            <p>what are the unique features of our project?</p>
        </div>
        <!-- 特色内容 -->
              <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">
                    <img src="../resources/images/jsLogo.png" alt="Vue Icon" class="tech-icon" style="width: 54px; height: 54px; border-radius: 24px; ">
                </div>
                <h3>Smooth Interaction with 10+ JS Scripts</h3>
                <p>Enjoy seamless and responsive interactions powered by over ten JavaScript scripts. </p>
            
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <img src="../resources/images/favicon.ico" alt="Vue Icon" class="tech-icon" style="width: 48px; height: 48px;">
                </div>
                <h3>Vue Component-Based Development</h3>
                <p>Flexible structure were built with Vue’s component-based development.ensuring the easy customization for specific campus needs.</p>
               
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                  <img src="../resources/images/hexo-logo-avatar.png" alt="Vue Icon" class="tech-icon" style="width: 54px; height: 54px;">
                </div>
                <h3>HEXO-Powered Code-Free Posting</h3>
                <p> Using HEXO without coding. Simply edit content in Markdown, and HEXO will do next.</p> 
               
            </div>
        </div>
    </section>

       
               
    <!-- AI部分 -->
       <section id="courses" class="section">
        <div class="section-title fade-in">
            <h2>Project Statement</h2>
            <p> About AI</p>
        </div>
        <div class="info-block">
            <h3 class="fade-in-left">AI Usage Statement</h3>
            <p class="fade-in-right">This project uses AI tools only to assist in drafting documentation,  suggesting UI copy,and solving the bugs. No user data is sent to third-party AI services from this front-end. Any AI-generated content is reviewed and edited by the team before publication. </a>.</p>

            <h3 class="fade-in-left">How AI Helps</h3>
            <ul class="fade-in-right">
                <li>Develop and debug complex components and scripts.</li>
                <li>Create suggested microcopy for UI elements and tooltips.</li>
                <li>and provide frameworks for basic pages.</li>
            </ul>

            <h3 class="fade-in-left">Which AIs have we used?</h3>
              <!-- AI图标区域 -->
  <div style="display: flex; align-items: center; gap: 1.5rem; margin: 0.5rem 0;">
    <!-- 主流AI图标（使用SVG简化版） -->
    <div style="text-align: center;">
      <svg width="40" height="40" viewBox="0 0 40 40" style="fill: #10a37f;">
        <rect x="5" y="5" width="30" height="30" rx="6" />
        <circle cx="20" cy="15" r="3" />
        <path d="M12 25h16v2h-16z" />
      </svg>
      <span style="font-size: 0.7rem; display: block; margin-top: 4px;">ChatGPT</span>
    </div>
    
    <div style="text-align: center;">
      <svg width="40" height="40" viewBox="0 0 40 40" style="fill: #4285f4;">
        <circle cx="20" cy="20" r="15" />
        <path d="M20 12v8l6 4" style="stroke: white; stroke-width: 2; fill: none;" />
      </svg>
      <span style="font-size: 0.7rem; display: block; margin-top: 4px;">Gemini</span>
    </div>
    
    <div style="text-align: center;">
      <svg width="40" height="40" viewBox="0 0 40 40" style="fill: #0d6efd;">
        <rect x="8" y="8" width="24" height="24" rx="2" />
        <path d="M15 20h10M20 15v10" style="stroke: white; stroke-width: 2; fill: none;" />
      </svg>
      <span style="font-size: 0.7rem; display: block; margin-top: 4px;">Claude</span>
    </div>
    
    <div style="text-align: center;">
      <svg width="40" height="40" viewBox="0 0 40 40" style="fill: #2383e2;">
        <polygon points="20,5 35,20 20,35 5,20" />
        <circle cx="20" cy="20" r="6" style="fill: white;" />
      </svg>
      <span style="font-size: 0.7rem; display: block; margin-top: 4px;">文心一言</span>
    </div>
  </div>
  
  <p class="fade-in-right" style="margin: 0; padding: 0.5rem; line-height: 1.6;">
            <p class="fade-in-right">AI suggestions are only a starting point. Team members validate technical accuracy, accessibility, and cultural appropriateness before any content goes live.</p>
        </div>
    </section>

    <!-- 关于我们 -->
    <section id="about" class="section">
        <div class="section-title">
            <h2>About us</h2>
            <p>HNU 24RG1 GROUP3</p>
        </div>
     

                   <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">
                       <img src="../resources/images/cls.jpg" alt="Vue Icon" class="tech-icon" style="width: 64px; height: 64px; border-radius: 50%; object-fit: cover; ">
                </div>
                <h3>有点砂</h3>
               <p>Manages project documentation lifecycle, establishes version control protocols, organizes technical specifications, and maintains accessible knowledge repositories for team reference.</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                        <img src="../resources/images/hsy.jpg" alt="Vue Icon" class="tech-icon" style="width: 64px; height: 64px; border-radius: 50%; object-fit: cover; ">
             
                </div>
                <h3>Alfred</h3>
               <p>Responsible for designing core user interaction flows, optimizing interface logic architecture, and ensuring intuitive operation paths that align with user mental models. </p>
            
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                      <img src="../resources/images/jlj.jpg" alt="Vue Icon" class="tech-icon" style="width: 64px; height: 64px; border-radius: 50%; object-fit: cover; ">
         
                </div>
                <h3>Avery</h3>
                <p> Crafts visual design systems, defines brand aesthetics, creates UI components, and ensures consistent visual language across all product interfaces and touchpoints.</p> 
               
            </div>
        </div>
                   <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">
                        <img src="../resources/images/lcy.jpg" alt="Vue Icon" class="tech-icon" style="width: 64px; height: 64px; border-radius: 50%; object-fit: cover; ">
           
                </div>
                <h3>Yuan</h3>
                <p>Develops reusable UI components, implements core functional modules, integrates front-end frameworks, and ensures technical feasibility of design specifications. </p>
            
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                        <img src="../resources/images/ljw.jpg" alt="Vue Icon" class="tech-icon" style="width: 64px; height: 64px; border-radius: 50%; object-fit: cover; ">
        
                </div>
                <h3>Kawaiii</h3>
                <p>Conducts API integration testing, debugs data transmission issues, verifies functional compatibility across platforms, and establishes automated testing protocols.</p>
               
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                     <img src="../resources/images/zc.jpg" alt="Vue Icon" class="tech-icon" style="width: 64px; height: 64px; border-radius: 50%; object-fit: cover; ">
             
                </div>
                <h3>Eilidh</h3>
                <p> Curates and standardizes design assets, manages resource libraries, coordinates asset handoff between design and development, and maintains design system documentation.</p> 
               
            </div>
        </div>
    </section>

    <!-- 参考代码 -->
    <section id="contact" class="section">
        <div class="section-title">
            <h2>Acknowledgements</h2>
            <p>Thanks for the coding</p>
        </div>
        <!-- 联系表单 -->
         <div class="carousel-container">
            <div class="carousel">
                <!-- 轮播项将通过JavaScript动态生成 -->
            </div>
            
            <!-- 控制按钮 -->
            <button class="carousel-control prev">
                <i>❮</i>
            </button>
            <button class="carousel-control next">
                <i>❯</i>
            </button>
            
            <!-- 指示器 -->
            <div class="carousel-indicators">
                <!-- 指示器将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>
    </section>

    <script src="js/headNavToggle.js"></script>
    <script src="js/words.js"></script>
    <script src="js/carouse.js"></script>
</body>
</html>